<template>
   <nut-popup 
    :visible="show" 
    position="bottom"
    catch-move
    safe-area-inset-bottom
    @click-overlay="close"
    adjust-position
  >
    <view class="input-com" >
      <textarea
        :value="meesgaeValue"
        @blur="textAreaBlur"
        @confirm="confirm"
        confirm-type="send"
        auto-focus
        adjust-position
        adjust-keyboard-to="bottom"
        :placeholder="'正在回复' + targetUser.name" 
        style="background-color: #f3f3f3;height: 240rpx;"
        :show-confirm-bar="false"
      />
      <view class="footer"  >
        <view class="send-btn"  @click="confirm" >发送</view>
      </view>
    </view>
   </nut-popup>
</template>
<script lang='ts' setup >
import { withDefaults, ref } from 'vue'

interface IProps {
  targetUser: API.DIARYUSER
  show: boolean
}

const emits = defineEmits(['confirm', 'blue', 'close'])

const meesgaeValue = ref('')

const props = withDefaults(defineProps<IProps>(), {
  targetUser: {
    id: '',
    name: ''
  },
  show: false
})

const textAreaBlur = () => {
  emits('blue')
}

const confirm = (e) => {
  
  console.log('confirm:', e);
  
  const text = e.detail.value
  
  emits('confirm' , text)
}

const close = () => {
  emits('close')
}

</script>
<style lang='scss' scoped >
@import '../../styles/index.scss';
.input-com {
  width: 100vw;
  padding: 24rpx;
  box-sizing: border-box;
  background-color: #fff;
  textarea {
    width: 100%;
    border-radius: 24rpx;
    padding: 12rpx;
    box-sizing: border-box;
  }
  .footer {
    width: 100%;
    height: 68rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 24rpx;
    .send-btn {
      width: 120rpx;
      height: 60rpx;
      border-radius: 36rpx;
      background-color: $main-color;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  // .icon {
  //   width: 24px;
  //   height: 24px;
  //   background-image: url('/static/common/emojis.png');
  //   background-repeat: no-repeat;
  // }
}
</style>